<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.t1 {
				width: 400px;
				height: 400px;
				border: 1px solid #0000FF;
			}
			
			.t2 {
				width: 20px;
				height: 20px;
				background-color: #36B9F8;
				float: left;
				opacity: 0;
			}
		</style>
	</head>

	<body id="cont">
		<div class="t1">

		</div>
	</body>
	<script type="text/javascript" src="js/myQurey.js"></script>
	<script type="text/javascript">
		var t1 = $('cont').getElementsByClassName('t1')[0];
		var xiezi = false;
		for(var i = 0; i < 400; i++) {
			var divs = document.createElement('div')
			divs.setAttribute('class', 't2');
			t1.appendChild(divs)
		}
		t1.onmousedown = function() {
			xiezi = true;
		}
		t1.onmouseup = function() {
			xiezi = false;
		}
		t1.onmouseover = function(ev) {
			if(xiezi) {
				
				var target = ev.target ;
				if(target.className.toLowerCase() == "t2") {
					target.style.opacity = 1
				}
			}
		}
	</script>

</html>